<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  xmlns:th="http://www.thymeleaf.org"
>
<head>
  <title>访问日志</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">

    <div class="myHeader">
      <div class="myHeader-title">
        网站访问日志
      </div>
    </div>
    <el-row>
      <el-form label-width="80px">
        <el-col :span="3">
          <el-form-item label-width="0px">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="toggle">高级搜索</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label-width="0px">
            <rx-date-select
              size="mini"
              v-model="form.logTime"
              @change="(val) => {this.form.logTime = val ;  searchPage()}"
            ></rx-date-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所在机房:">
            <el-select v-model="form.houseIdStr" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="house in houses" :label="house.houseName" :key="house.id" :value="house.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="协议类型:">
            <el-select v-model="form.transProtocolQuery" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in fieldFormatter.hotIp.protocolMap" :label="val" :key="key" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-row>
      <el-form label-width="100px" class="container-search" v-show="formShow">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item label="源IP:">
              <el-input
                v-model="form.srcIpQuery"
                clearable
                show-word-limit
                maxlength="64"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.srcIpAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="源端口:">
              <el-input
                v-model="form.srcPortQuery"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="目的IP:">
              <el-input
                v-model="form.destIpQuery"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.destIpAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="目的端口:">
              <el-input
                v-model="form.destPortQuery"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="访问域名:">
              <el-input
                v-model="form.domainQuery"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.domainAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="访问网址:">
              <el-input
                v-model="form.urlQuery"
                clearable
                show-word-limit
                maxlength="30"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.urlAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="访问时间:">
              <rx-range-time
                v-model="form.timeArray"
              ></rx-range-time>
            </el-form-item>
          </el-col>

        </el-row>

        <div style="text-align:center; margin-bottom:20px">
          <el-button type="primary" size="medium" @click="searchPage">查 找</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" size="medium" @click="resetPage">重 置</el-button>
        </div>
      </el-form>
    </el-row>

    <template>
      <my-table
        :data="page.records"
        :columns="columns"
        @handle-selection-change="selection"
      >
      </my-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="changeSize"
          @current-change="goto"
          :current-page="page.current"
          :page-sizes="[10, 20, 30]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/slog/model/AccessLog.js"></script>
  <script src="/static/js/module/slog/api/slogAccessLogApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/slog/admin_visit_log.js"></script>
</div>
</body>
</html>
